import React, { useState } from 'react'
import { Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { Input, Button, ConfigProvider, Space, DatePicker, Modal, Cascader, Form, InputNumber, Radio, Select, Switch, TreeSelect, } from 'antd';


import { updateworksinfo,updateworks,deleteworks } from '../../../../request/api'
export default function User_content(props) {
    const { userdata, gettags, getuserlist } = props;


    let [_id, set_id] = useState('')
    let [name, setname] = useState([])//名称
    let [sort, setsort] = useState([])//排序
    let [state, setstate] = useState([])//状态
    const [modal2Open, setModal2Open] = useState(false); //控制模态框是否显示


    const columns: TableProps<DataType>['columns'] = [
        {
            width: '60%',
            title: '标签名称',
            key: 'name',
            dataIndex: 'name',
            render: (_, record) => (
                <>
                    {record.name}
                </>
            ),
        },
        {
            title: '排序',
            dataIndex: 'sort',
            key: 'sort',
        },
        {
            title: '上线时间',
            dataIndex: 'add_Time',
            key: 'add_Time',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'tagstype',
        },

        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        datatags(record)
                    }}>编辑</a>
                    <a onClick={() => {
                        updatastate(record.key,record.state )
                    }}>{record.state=='上线'?'下线':'上线'}</a>
                    <a onClick={() => {
                        Deleteworks(record.key)
                    }}>删除</a>
                </Space>
            ),
        },
    ];
    // 修改状态
    const updatastate = async(_id: string,state: boolean) => {
        let  data = await updateworks({_id:_id,type:state})
        if(data.code ==200){
            alert('修改状态成功')
            getuserlist(data.code)
        }
    }
    // 删除数据
    const Deleteworks = async(_id: string) => {
        let  data = await deleteworks({_id:_id})
        if(data.code ==200){
            alert('删除成功')
            getuserlist(data.code)
        }
    }

    // 数据展示
    let dataSource = userdata.map(item => ({
        key: item._id,
        name: item.name,
        sort: item.sort,
        add_Time: item.add_Time,
        state: item.state == true ? '上线' : '下线'
    }));

    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };

    // 数据回显
    const datatags = (item: any) => {
        setModal2Open(true)
        setname(item.name)
        setsort(item.sort)
        setstate(item.state)
        set_id(item.key)
    }

    // 修改标签
    const tagsupdata = async () => {
        let from = {
            _id: _id,
            name: name,
            sort: sort,
            state: state,
            add_Time:new Date().toLocaleString()
        }
        let res = await updateworksinfo({ from: from })
        if (res.code == 200) {
            alert('修改成功')
            getuserlist(res.code)
            setModal2Open(false)
        }
    }

    return (
        <div>
            <Table<DataType> columns={columns} dataSource={dataSource} />
            <Modal
                title='修改标签'
                centered
                open={modal2Open}
                onOk={() => tagsupdata()}
                onCancel={() => setModal2Open(false)}
            >
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    initialValues={{ size: componentSize }}
                    onValuesChange={onFormLayoutChange}
                    size={componentSize as SizeType}
                    style={{ maxWidth: 600 }}
                >
                    <Form.Item label="热词名称">
                        <Input value={name} onChange={(e) => {
                            setname(e.target.value)
                        }} />
                    </Form.Item>
                    <Form.Item label="排序">
                        <Input value={sort} onChange={(e) => {
                            setsort(e.target.value)
                        }} />
                    </Form.Item>
                    <Form.Item label="状态" >
                        <Select value={state} onChange={(e) => {
                            setstate(e)
                        }}>
                            <Select.Option value='true'>上线</Select.Option>
                            <Select.Option value='false'>下线</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>

            </Modal>
        </div>
    )
}
